<!--商户管理-商户添加-->
<template>
  <div class="my-resouce-add-container" v-loading="loading">
    <el-form ref="form" :model="form" label-width="60px" style="padding: 10px">
      <p class="item-title">商户基本信息:</p>
      <el-row :gutter="5">
        <el-col :span="6">
          <p class="labelMargin">商户名称:</p>
          <el-input v-model="form.sellername" placeholder="商户名称 最长30个字符"></el-input>
        </el-col>
        <el-col :span="6">
          <p class="labelMargin">商户分区:</p>
          <el-select v-model="form.areaid" placeholder="请选择" style="width: 100%">
            <el-option
              v-for="item in agentPartitionData.agent_area_list"
              :key="item.areaid"
              :label="item.areaname"
              :value="item.areaid">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <p class="labelMargin">商户编号:</p>
          <el-input v-model="form.sellersn" placeholder="10个字符 唯一"></el-input>
        </el-col>
        <el-col :span="6">
          <p class="labelMargin">商户标签:</p>
          <el-select v-model="form.sellertag" placeholder="请选择" style="width: 100%">
            <el-option
              v-for="item in sellerTags"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="5" style="margin-top: 15px">
        <el-col :span="6">
          <p class="labelMargin">商户电话1:</p>
          <el-input v-model="form.sellerphone" placeholder="例：0898-82708017"></el-input>
        </el-col>
        <el-col :span="6">
          <p class="labelMargin">商户电话2:</p>
          <el-input v-model="form.sellerphone2" placeholder="例：0898-82708017"></el-input>
        </el-col>
        <el-col :span="6">
          <p class="labelMargin">商户电话3:</p>
          <el-input v-model="form.sellerphone3" placeholder="例：0898-82708017"></el-input>
        </el-col>
        <el-col :span="6">
        </el-col>
      </el-row>
      <el-row :gutter="5" style="margin-top: 15px">
        <el-col :span="6">
          <p class="labelMargin">所在城市:</p>
          <el-input v-model="form.city" placeholder="海口市"></el-input>
        </el-col>
        <el-col :span="6">
          <p class="labelMargin">商户地址:<span @click="showMapDialog()" class="map-btn">打开地图</span></p>
          <el-input v-model="form.selleraddress" :disabled="inputDisabled"></el-input>
        </el-col>
        <el-col :span="6">
          <p class="labelMargin">详细地址:</p>
          <el-input v-model="form.addrDetail" placeholder="几栋几单元"></el-input>
        </el-col>
        <el-col :span="6">
        </el-col>
      </el-row>
      <el-row :gutter="5" style="margin-top: 15px">
        <el-col :span="8">
          <p class="labelMargin">商户头像:</p>
          <el-upload
            class="avatar-uploader"
            :action="uploadURL"
            :show-file-list="false"
            :on-success="handleSellerImageSuccess">
            <img v-if="fullImgUrl.sellerimage" :src="fullImgUrl.sellerimage" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
        <el-col :span="8">
          <p class="labelMargin">餐饮许可证正面图:</p>
          <el-upload
            class="avatar-uploader"
            :action="uploadURL"
            :show-file-list="false"
            :on-success="handleCert_1ImageSuccess">
            <img v-if="fullImgUrl.seller_image_cert_1" :src="fullImgUrl.seller_image_cert_1" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
        <el-col :span="8">
          <p class="labelMargin">餐饮许可证正面图:</p>
          <el-upload
            class="avatar-uploader"
            :action="uploadURL"
            :show-file-list="false"
            :on-success="handleCert_2ImageSuccess">
            <img v-if="fullImgUrl.seller_image_cert_3" :src="fullImgUrl.seller_image_cert_3" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
        <el-col :span="6">
        </el-col>
      </el-row>
      <p class="item-title">商户银行账号信息:</p>
      <el-row :gutter="5" style="margin-top: 15px">
        <el-col :span="6">
          <p class="labelMargin">商户银行名称:</p>
            <el-select v-model="form.sellerowner_bankcode" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in bankWeixin"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
        </el-col>
        <el-col :span="6">
          <p class="labelMargin">商户银行账号:</p>
          <el-input v-model="form.sellerowner_bankaccount"></el-input>
        </el-col>
        <el-col :span="6">
        </el-col>
        <el-col :span="6">
        </el-col>
      </el-row>
      <p class="item-title">商户所有者信息:</p>
      <el-row :gutter="5" style="margin-top: 15px">
        <el-col :span="6">
          <p class="labelMargin">所有者姓名:</p>
          <el-input v-model="form.sellerowner_realname"></el-input>
        </el-col>
        <el-col :span="6">
          <p class="labelMargin">所有者手机号:</p>
          <el-input v-model="form.sellermobile"></el-input>
        </el-col>
        <el-col :span="6">
          <p class="labelMargin">所有者身份证号:</p>
          <el-input v-model="form.seller_nationalid"></el-input>
        </el-col>
        <el-col :span="6">
        </el-col>
      </el-row>
      <el-row :gutter="5" style="margin-top: 15px">
        <el-col :span="8">
          <p class="labelMargin">身份证正面图:</p>
            <el-upload
              class="avatar-uploader"
              :action="uploadURL"
              :show-file-list="false"
              :on-success="handleNationalid_1ImageSuccess">
              <img v-if="fullImgUrl.seller_image_nationalid_1" :src="fullImgUrl.seller_image_nationalid_1"
                   class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-col>
        <el-col :span="8">
          <p class="labelMargin">身份证反面图:</p>
            <el-upload
              class="avatar-uploader"
              :action="uploadURL"
              :show-file-list="false"
              :on-success="handleNationalid_2ImageSuccess">
              <img v-if="fullImgUrl.seller_image_nationalid_2" :src="fullImgUrl.seller_image_nationalid_2 "
                   class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-col>
          <el-col :span="8">
            <p class="labelMargin">手持身份证正面图:</p>
              <el-upload
                class="avatar-uploader"
                :action="uploadURL"
                :show-file-list="false"
                :on-success="handleNationalid_3ImageSuccess">
                <img v-if="fullImgUrl.seller_image_nationalid_3" :src="fullImgUrl.seller_image_nationalid_3 "
                     class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-col>
      </el-row>
      <el-row :gutter="5" style="margin-top: 15px">
        <el-col :span="5">
          <p class="labelMargin">结款委托书(可选):</p>
            <el-upload
              class="avatar-uploader"
              :action="uploadURL"
              :show-file-list="false"
              :on-success="handleCert_4ImageImageSuccess">
              <img v-if="fullImgUrl.seller_image_cert_4" :src="fullImgUrl.seller_image_cert_4"
                   class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-col>
        <el-col :span="6" style="padding: 10px;box-sizing: border-box">
            <a href="#" style="color: #18cc3b;text-decoration: underline">点击下载借款委托书模板</a>
            <p>（注：营业执照上的法人姓名和商家身份证姓名不一致时，需下载结款委托书，签完后上传。）</p>
        </el-col>
      </el-row>

      <p class="item-title">其他信息:</p>
      <el-row :gutter="5" style="margin-top: 15px">
        <el-col :span="6">
          <p class="labelMargin">代理抽成百分比:</p>
          <el-input v-model="form.agent_charge_percent" min="0.001" max="20" step="0.1"></el-input>
        </el-col>
        <el-col :span="6">
          <p class="labelMargin">商户密码:</p>
          <el-input v-model="form.sellerpassword" type="number" length="6"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="5" style="margin-top: 15px" v-show="isEdit">
        <el-col :span="6">
          <p class="labelMargin">商户手机验证码:</p>
          <el-input v-model="form.activecode" min="0.001" max="20" step="0.1"></el-input>
        </el-col>
        <el-col :span="6">
          <p class="labelMargin" style="visibility: hidden">商户手机验证码:</p>
          <el-button v-show="!isShowLeftTime" @click.native="obtainCheckCode()">获取验证码</el-button>
          <el-button v-show="isShowLeftTime">已发送至{{form.sellerOldPhone}},{{leftTime}} s后重新获取</el-button>
        </el-col>
      </el-row>

      <el-form-item style="margin-top: 60px">
        <el-button type="primary" @click.native="onSubmit()">确认</el-button>
        <el-button @click.native="goBack()">取消</el-button>
      </el-form-item>
    </el-form>

    <!--地址选择对话框-->
    <div class="parent-dialog" v-show="showMapStatus">
      <div class="dialog-form-input">
        <div class="dialog-map" id="map">
        </div>
        <div class="dialog-map-list">
          <p class="dialog-map-list-current-city">当前城市:{{this.form.city}}</p>
          <el-input class="dialog-map-keyword" v-model="form.mapKeyWord" @input="listenInput" size="small"
                    placeholder="请输入相关地标或拖动地图选择"></el-input>
          <ul class="dialog-map-ul">
            <li class="dialog-map-ul-li" v-for="item in nearAddress" @click="selectAddrFromMap(item)">
              <p>{{item.title}}</p>
              <p>{{item.address}}</p>
            </li>
          </ul>
          <el-button class="dialog-map-option-btn" size="small" type="primary" @click="showMapStatus=false">取消选择
          </el-button>
        </div>
        <img class="location" ref="iconLocat" src="../../assets/images/icon_location.png"/>
      </div>
    </div>
  </div>
</template>

<script>
  import md5 from "js-md5"

  export default {
    data() {
      return {
        pathArr: [
          {path: "/", name: "首页"},
          {path: "/container/seller_list", name: "商户列表"},
          {path: "/container/seller_add", name: "商户添加"},
        ],
        form: {
          sellerid: "",
          areaid: "",
          latitude: "",
          longitude: "",
          sellerowner_realname: "",
          sellerowner_bankcode: "",
          sellerowner_bankaccount: "",
          sellername: "",
          sellerimage: "",
          sellersn: "",
          sellertag: "",
          sellermobile: "",
          sellerpassword: "",
          sellerphone: "",
          sellerphone2:"",
          sellerphone3:"",
          selleraddress: "",
          agent_charge_percent: "",
          seller_nationalid: "",
          seller_image_nationalid_1: "",
          seller_image_nationalid_2: "",
          seller_image_nationalid_3: "",
          seller_image_cert_4:"",
          seller_image_cert_1: "",
          seller_image_cert_3: "",
          city: "",
          addrDetail: "",
          mapKeyWord: "",
          sellerOldPhone:"",//修改之前的手机号，接收短信
          activecode:""
        },
        fullImgUrl: {
          sellerimage: "",
          seller_image_nationalid_1: "",
          seller_image_nationalid_2: "",
          seller_image_nationalid_3: "",
          seller_image_cert_4:"",
          seller_image_cert_1: "",
          seller_image_cert_3: ""
        },
        uploadURL: "",//图片上传Url
        agentPartitionData: "",//分区列表
        loading: false,
        sellerTags: "",//商户标签
        bankWeixin: [],//银行列表
        nearAddress: [],//中心点附近的地点集合
        showMapStatus: false,//是否显示地图对话框

        inputDisabled: true,
        isEdit:true,//编辑或新增
        isShowLeftTime:false,//验证码发送剩余时间
        leftTime:""//验证码发送剩余时间
      }
    },
    mixins: [],
    components: {},
    beforeRouteLeave(to, from, next) {
      next();
    },
    mounted() {
    },
    activated() {
      this.initCurrentPath();
      this.initUploadURL();
      this.requestVideoTypes();
      this.initSellerInfo();
      this.initSellerTags();
      this.initbankWeixin();
    },
    deactivated() {
      this.$destroy(true);
    },
    methods: {
      //初始化面包屑路径
      initCurrentPath() {
        if (this.$utils.isEmpty(this.$route.query.sellerid)) {
          this.$store.commit('changeCurrentLocation', this.pathArr);
          this.isEdit=false;
          return;
        }
        this.pathArr = [
          {path: "/", name: "首页"},
          {path: "/container/seller_list", name: "商户列表"},
          {path: "/container/seller_add", name: "商户修改"},
        ];
        this.isEdit=true;
        this.$store.commit('changeCurrentLocation', this.pathArr);
      },

      //初始化图片上传地址
      initUploadURL() {
        this.uploadURL = this.$http.initUploadImgURL(this);
      },

      //商户头像上传成功
      handleSellerImageSuccess(res, file) {
        if (res.result === "error") {
          this.$message({message: '上传失败！', type: 'warning'});
          return;
        }
        this.form.sellerimage = res.url;
        this.fullImgUrl.sellerimage = this.$utils.genImgURL(res.url);
      },

      //身份证1上传成功
      handleNationalid_1ImageSuccess(res, file) {
        if (res.result === "error") {
          this.$message({message: '上传失败！', type: 'warning'});
          return;
        }
        this.form.seller_image_nationalid_1 = res.url;
        this.fullImgUrl.seller_image_nationalid_1 = this.$utils.genImgURL(res.url);
      },

      //结款委托书上传成功的回调
      handleCert_4ImageImageSuccess(res, file) {
        if (res.result === "error") {
          this.$message({message: '上传失败！', type: 'warning'});
          return;
        }
        this.form.seller_image_cert_4 = res.url;
        this.fullImgUrl.seller_image_cert_4 = this.$utils.genImgURL(res.url);
      },

      //身份证2上传成功
      handleNationalid_2ImageSuccess(res, file) {
        if (res.result === "error") {
          this.$message({message: '上传失败！', type: 'warning'});
          return;
        }
        this.form.seller_image_nationalid_2 = res.url;
        this.fullImgUrl.seller_image_nationalid_2 = this.$utils.genImgURL(res.url);
      },

      // 手持身份证正面图
      handleNationalid_3ImageSuccess(res, file) {
        if (res.result === "error") {
          this.$message({message: '上传失败！', type: 'warning'});
          return;
        }
        this.form.seller_image_nationalid_3 = res.url;
        this.fullImgUrl.seller_image_nationalid_3 = this.$utils.genImgURL(res.url);
      },

      //执照1上传成功
      handleCert_1ImageSuccess(res, file) {
        if (res.result === "error") {
          this.$message({message: '上传失败！', type: 'warning'});
          return;
        }
        this.form.seller_image_cert_1 = res.url;
        this.fullImgUrl.seller_image_cert_1 = this.$utils.genImgURL(res.url);
      },

      //执照2上传成功
      handleCert_2ImageSuccess(res, file) {
        if (res.result === "error") {
          this.$message({message: '上传失败！', type: 'warning'});
          return;
        }
        this.form.seller_image_cert_3 = res.url;
        this.fullImgUrl.seller_image_cert_3 = this.$utils.genImgURL(res.url);
      },


      //修改时初始化参数
      initSellerInfo() {
        this.form.sellerid = this.$route.query.sellerid;
        this.form.areaid = this.$route.query.areaid;
        this.form.latitude = this.$route.query.latitude;
        this.form.longitude = this.$route.query.longitude;
        this.form.sellerowner_realname = this.$route.query.sellerowner_realname;
        this.form.sellerowner_bankcode = this.$route.query.sellerowner_bankcode;
        this.form.sellerowner_bankaccount = this.$route.query.sellerowner_bankaccount;
        this.form.sellername = this.$route.query.sellername;
        this.form.sellerimage = this.$route.query.sellerimage;
        this.form.sellersn = this.$route.query.sellersn;
        this.form.sellertag = this.$route.query.sellertag;
        this.form.sellermobile = this.$route.query.sellermobile;
        this.form.sellerpassword = this.$route.query.sellerpassword;
        this.form.sellerphone = this.$route.query.sellerphone;
        this.form.sellerphone2 = this.$route.query.sellerphone2;
        if (this.form.sellerphone2 === 'undefined') {
          this.form.sellerphone2 = ''
        }
        this.form.sellerphone3 = this.$route.query.sellerphone3;
        if (this.form.sellerphone3 === 'undefined') {
          this.form.sellerphone3 = ''
        }
        this.form.sellerOldPhone=this.$route.query.sellermobile;
        this.form.selleraddress = this.$route.query.selleraddress;
        this.form.agent_charge_percent = this.$route.query.agent_charge_percent;
        this.form.seller_nationalid = this.$route.query.seller_nationalid;
        this.form.seller_image_nationalid_1 = this.$route.query.seller_image_nationalid_1;
        this.form.seller_image_nationalid_2 = this.$route.query.seller_image_nationalid_2;
        this.form.seller_image_nationalid_3 = this.$route.query.seller_image_nationalid_3;
        this.form.seller_image_cert_4 = this.$route.query.seller_image_cert_4;
        this.form.seller_image_cert_1 = this.$route.query.seller_image_cert_1;
        this.form.seller_image_cert_3 = this.$route.query.seller_image_cert_3;

        if (this.$utils.isEmpty(this.form.sellerid)) {
          return;
        }
        this.fullImgUrl.sellerimage = this.$utils.genImgURL(this.form.sellerimage);
        this.fullImgUrl.seller_image_nationalid_1 = this.$utils.genImgURL(this.form.seller_image_nationalid_1);
        this.fullImgUrl.seller_image_nationalid_2 = this.$utils.genImgURL(this.form.seller_image_nationalid_2);
        this.fullImgUrl.seller_image_nationalid_3 = this.$utils.genImgURL(this.form.seller_image_nationalid_3);
        this.fullImgUrl.seller_image_cert_4 = this.$utils.genImgURL(this.form.seller_image_cert_4);
        this.fullImgUrl.seller_image_cert_1 = this.$utils.genImgURL(this.form.seller_image_cert_1);
        this.fullImgUrl.seller_image_cert_3 = this.$utils.genImgURL(this.form.seller_image_cert_3);
      },

      //获取文章分类分类信息
      requestVideoTypes() {
        let parameter = new URLSearchParams();
        parameter.append("action", "agent_area_list");
        let that = this;
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.agentPartitionData = data;
        });
      },

      //初始化标签列表
      initSellerTags() {
        let item = localStorage.getItem("systerm_info");
        let info = JSON.parse(item);
        this.sellerTags = info.seller_tag;
      },

      //初始化银行列表
      initbankWeixin() {
        let item = localStorage.getItem("systerm_info");
        let info = JSON.parse(item);
        let banks = info.bank_weixin;
        let codes = banks.code;
        let names = banks.name;
        for (let i = 0; i < codes.length; i++) {
          let item = {};
          item.code = codes[i];
          item.name = names[i];
          this.bankWeixin.push(item);
        }
      },

      //返回上一页
      goBack() {
        this.$router.go(-1)
      },

      //确认提交
      onSubmit() {
        if (this.$utils.isEmpty(this.form.latitude)) {
          this.$message({message: '地址纬度为填！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.longitude)) {
          this.$message({message: '地址经度未填！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.sellerowner_realname)) {
          this.$message({message: '商户所有者名未填写！', type: 'warning'});
          return;
        }
        if (this.form.sellerowner_realname.length>30) {
          this.$message({message: '商户所有者名不能超过30个字符！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.sellerowner_bankcode)) {
          this.$message({message: '商户银行名称未填写！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.sellerowner_bankaccount)) {
          this.$message({message: '商户银行账号未填写！', type: 'warning'});
          return;
        }
        if (this.form.sellerowner_bankaccount.length > 19) {
          this.$message({message: '商户银行账号不正确！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.sellername)) {
          this.$message({message: '商户名称未输入！', type: 'warning'});
          return;
        }
        if (this.form.sellername.length > 30) {
          this.$message({message: '商户名称太长，最多30个字符！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.sellerimage)) {
          this.$message({message: '商户头像未上传！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.sellersn)) {
          this.$message({message: '商户SN码未输入！', type: 'warning'});
          return;
        }
        if (this.form.sellersn.length !== 10) {
          this.$message({message: '商户编号为10个字符', type: 'warning'});
          return;
        }
//        if (this.$utils.isEmpty(this.form.sellertag)) {
//          this.$message({message: '商户标签未填写！', type: 'warning'});
//          return;
//        }
        if (this.$utils.isEmpty(this.form.sellermobile)) {
          this.$message({message: '商户所有者手机号未输入！', type: 'warning'});
          return;
        }
        if (!this.$utils.isPhoneNum(this.form.sellermobile)) {
          this.$message({message: '商户所有者手机号格式不正确！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.sellerid) && this.$utils.isEmpty(this.form.sellerpassword)) {
          this.$message({message: '商户密码未填写！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.sellerphone)) {
          this.$message({message: '商户电话未输入！', type: 'warning'});
          return;
        }
        if (!this.$utils.isPhoneNum(this.form.sellerphone)&&!this.$utils.isTelephone(this.form.sellerphone)) {
          this.$message({message: '商户电话格式不正确！', type: 'warning'});
          return;
        }
        if (!this.$utils.isEmpty(this.form.sellerphone2)) {
          if (!this.$utils.isPhoneNum(this.form.sellerphone2)&&!this.$utils.isTelephone(this.form.sellerphone2)) {
            this.$message({message: '商户电话2格式不正确！', type: 'warning'});
            return;
          }
        }
        if (!this.$utils.isEmpty(this.form.sellerphone3)) {
          if (!this.$utils.isPhoneNum(this.form.sellerphone3)&&!this.$utils.isTelephone(this.form.sellerphone3)) {
            this.$message({message: '商户电话3格式不正确！', type: 'warning'});
            return;
          }
        }
        if (this.$utils.isEmpty(this.form.selleraddress)) {
          this.$message({message: '商户地址未填写！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.addrDetail)||this.form.addrDetail.replace(/(^\s*)|(\s*$)/g, "").length ===0) {
          this.$message({message: '详细地址未输入！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.agent_charge_percent)) {
          this.$message({message: '商户折扣未输入！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.seller_nationalid)) {
          this.$message({message: '商户身份证号未填写！', type: 'warning'});
          return;
        }
        if (this.form.seller_nationalid.length !== 18) {
          this.$message({message: '商户身份证号格式不正确！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.seller_image_nationalid_1)) {
          this.$message({message: '商户身份正面图未上传！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.seller_image_nationalid_2)) {
          this.$message({message: '商户身份反面图未上传！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.seller_image_nationalid_3)) {
          this.$message({message: '手持身份证正面未上传！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.seller_image_cert_1)) {
          this.$message({message: '营业执照正面图未上传！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.seller_image_cert_3)) {
          this.$message({message: '营业执照反面图未上传！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.areaid)) {
          this.$message({message: '商户分区未选择！', type: 'warning'});
          return;
        }
        if (this.$utils.isEmpty(this.form.sellerid)) {//新增
        } else {//修改需要商户手机验证码
          if(this.$utils.isEmpty(this.form.activecode)){
            this.$message({message: '请获取商户手机验证码！', type: 'warning'});
            return;
          }
        }
        let parameter = new URLSearchParams();
        parameter.append("sellerid", this.form.sellerid);
        parameter.append("areaid", this.form.areaid);
        parameter.append("latitude", this.form.latitude);
        parameter.append("longitude", this.form.longitude);
        parameter.append("sellerowner_realname", this.form.sellerowner_realname);
        parameter.append("sellerowner_bankcode", this.form.sellerowner_bankcode);
        parameter.append("sellerowner_bankaccount", this.form.sellerowner_bankaccount);
        parameter.append("sellername", this.form.sellername);
        parameter.append("sellerimage", this.form.sellerimage);
        parameter.append("sellersn", this.form.sellersn);
        if (!this.$utils.isEmpty(this.form.sellertag)) {
          parameter.append("sellertag", this.form.sellertag);
        }else{
          parameter.append("sellertag", "");
        }
        parameter.append("sellermobile", this.form.sellermobile);
        if (!this.$utils.isEmpty(this.form.sellerpassword)) {
          if(this.form.sellerpassword.length !== 6){
              this.$message({message: '商户密码为6位数字！', type: 'warning'});
              return;
          }
          parameter.append("sellerpassword", md5(this.form.sellerpassword));
        }
        parameter.append("sellerphone", this.form.sellerphone);
        parameter.append("sellerphone2", this.form.sellerphone2);
        parameter.append("sellerphone3", this.form.sellerphone3);
        parameter.append("selleraddress", this.form.selleraddress + this.form.addrDetail);
        parameter.append("agent_charge_percent", this.form.agent_charge_percent);
        parameter.append("seller_nationalid", this.form.seller_nationalid);
        parameter.append("seller_image_nationalid_1", this.form.seller_image_nationalid_1);
        parameter.append("seller_image_cert_4", this.form.seller_image_cert_4);
        parameter.append("seller_image_nationalid_2", this.form.seller_image_nationalid_2);
        parameter.append("seller_image_nationalid_3", this.form.seller_image_nationalid_3);
        parameter.append("seller_image_cert_1", this.form.seller_image_cert_1);
        parameter.append("seller_image_cert_3", this.form.seller_image_cert_3);
        if (this.$utils.isEmpty(this.form.sellerid)) {
          this.requestAddSeller(parameter);
        } else {
          parameter.append("activecode",this.form.activecode)
          this.requestModifySeller(parameter);
        }
      },

      //发送添加请求
      requestAddSeller(parameter) {
        parameter.append("action", "agent_seller_create");
        let that = this;
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.$message({type: 'success', message: '添加成功!'});
          that.$router.go(-1);
        });
      },

      //发送修改请求
      requestModifySeller(parameter) {
        parameter.append("action", "agent_seller_modify");
        let that = this;
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.$message({type: 'success', message: '修改成功!'});
          that.$router.go(-1);
        });
      },

      //显示地图对话框
      showMapDialog() {
        if (this.$utils.isEmpty(this.form.city)) {
          this.$message({message: '请输入所在城市后打开地图！', type: 'warning'});
          return;
        }
        this.showMapStatus = true;
        this.initBMapObject();
      },

      //从地址列表中选择地址
      selectAddrFromMap(item) {
        this.showMapStatus = false;
        this.form.latitude = item.lat;
        this.form.longitude = item.lng;
        this.form.selleraddress = item.city + item.address;
      },

      //初始化BMap对象
      initBMapObject() {
        if (!this.$utils.isEmpty(window.BMap)) {
          this.initMap();
          this.initCenterEl();
          return;
        }
        window.initBMapObject = this.initBMapObject;
        let that = this;
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "https://api.map.baidu.com/api?v=2.0&ak=wr0GsKjPA6UVD1UImifwqKGjXv53Lrj8&callback=initBMapObject";
        document.head.appendChild(script);
      },

      //初始化地图
      initMap() {
        this.bdMap = new BMap.Map("map");    // 创建Map实例
        this.bdMap.centerAndZoom(this.form.city, 16);  // 初始化地图,设置中心点坐标和地图级别
        this.bdMap.setCurrentCity(this.form.city);          // 设置地图显示的城市 此项是必须设置的
        this.bdMap.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        this.bdMap.enableDragging();
        this.bdMap.addEventListener("dragend", this.onDragend);
      },

      //初始化中心的的屏幕坐标
      initCenterEl() {
        let w = this.$refs.iconLocat.width;
        let h = this.$refs.iconLocat.height;
        let center = {left: 180, top: 260};
        this.centerPixel = new BMap.Pixel(center.left, center.top);
        this.geocoder = new BMap.Geocoder();
        this.localSearch = new BMap.LocalSearch(this.bdMap, {onSearchComplete: this.callBackSearch});
        let that = this;
        setTimeout(function () {//1秒之后去搜索附近
          that.onDragend();
        }, 1 * 1000);
      },

      //地图拖拽后的回调函数
      onDragend() {
        let point = this.bdMap.pixelToPoint(this.centerPixel);
        let opt = {
          poiRadius: 500,  // 检索范围，单位：米
          numPois: 20  // 返回的POI点个数
        }
        this.geocoder.getLocation(point, this.callBackGeocoder, opt);
      },

      //逆向地址解析结果
      callBackGeocoder(result) {
        this.nearAddress.splice(0, this.nearAddress.length);
        for (let i = 0; i < result.surroundingPois.length; i++) {
          let index = result.surroundingPois[i];
          let temp = {};
          temp.lat = index.point.lat;
          temp.lng = index.point.lng;
          temp.city = index.city;
          temp.address = index.address;
          temp.title = index.title;
          this.nearAddress.push(temp);
        }
      },

      //监听地址搜索输入
      listenInput() {
        console.log("listenInput", this.form.mapKeyWord)
        this.localSearch.search(this.form.mapKeyWord);
      },

      //地址搜索结果回调
      callBackSearch() {
        if (this.$utils.isEmpty(this.localSearch.getResults())) {
          this.onDragend();
          return;
        }
        let address = {};
        if (!this.$utils.isEmpty(this.localSearch.getResults().vr)) {
          address = this.localSearch.getResults().vr;
        } else if (!this.$utils.isEmpty(this.localSearch.getResults().Br)) {
          address = this.localSearch.getResults().Br;
        }
        this.nearAddress.splice(0, this.nearAddress.length);
        for (let i = 0; i < address.length; i++) {
          let index = address[i];
          let temp = {};
          temp.lat = index.point.lat;
          temp.lng = index.point.lng;
          temp.city = index.city;
          temp.address = index.address;
          temp.title = index.title;
          this.nearAddress.push(temp);
        }
        this.move2FirstPoint();
      },

      //将中心点移动到搜索结果的第一个点
      move2FirstPoint() {
        if (this.nearAddress.length === 0) {
          return;
        }
        let point = new BMap.Point(this.nearAddress[0].lng, this.nearAddress[0].lat);
        this.bdMap.panTo(point);
      },


      //获取验证码
      obtainCheckCode() {
        if (!this.$utils.isPhoneNum(this.form.sellerOldPhone)) {
          this.$message({
            message: '手机号不正确!',
            type: 'warning'
          });
          return;
        }
        let parameter = new URLSearchParams();
        parameter.append("action", "base_activecode_send_mobile");
        parameter.append("activetarget", this.form.sellerOldPhone);
        let that = this;
        that.loading = true;
        this.$http.requestData(that, parameter, -1, function (data) {
          that.$message({message: '验证码已发送至商户手机号!'+that.form.sellerOldPhone, type: 'success'});
          that.setLeftTime();
        });
      },

      // 设置剩余时间
      setLeftTime() {
        this.isShowLeftTime = true;
        this.leftTime = 60;
        let that = this;
        let interval = setInterval(function () {
          if (that.leftTime === 0) {
            that.isShowLeftTime = false;
            clearInterval(interval);
          }
          that.leftTime--;
        }, 1 * 1000);
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" scoped="" type="text/scss">

  .my-resouce-add-container {
    height: 100%;
    width: 100%;
    padding: 10px;
    overflow: auto;
  }

  //start 商户头像上传部分
  .avatar-uploader .el-upload {
    display: inline-block;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  //end 商户头像上传部分

  .item-title {
    height: 48px;
    line-height: 48px;
    font-weight: bolder;
    border-bottom: 1px solid lightgray;
    margin-bottom: 10px;
  }

  /*地址选择对话框*/
  .parent-dialog {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5) !important;
    background-color: #000;
    filter: Alpha(opacity=50);
  }

  .dialog-form-input {
    width: 680px;
    height: 480px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -340px;
    margin-top: -240px;
    background-color: white;
  }

  .dialog-map {
    width: 340px;
    box-sizing: border-box;
    height: 480px;
    float: left;
  }

  .dialog-map-list {
    float: right;
    width: 340px;
    box-sizing: border-box;
    height: 480px;
    position: relative;
    .dialog-map-list-current-city {
      height: 36px;
      line-height: 36px;
      text-indent: 10px;
    }
    .dialog-map-keyword {
      width: 320px;
      margin-left: 10px;
    }
    .dialog-map-ul {
      width: 320px;
      margin: 0 auto;
      height: 340px;
      overflow: auto;
      margin-top: 5px;
      .dialog-map-ul-li {
        box-sizing: border-box;
        width: 100%;
        height: 42px;
        margin-top: 5px;
        cursor: pointer;
        border-bottom: 1px solid lavender;
        > p {
          text-indent: 10px;
          height: 21px;
          line-height: 21px;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .dialog-map-ul-li:hover {
        background-color: lightgray;
      }
    }
    .dialog-map-option-btn {
      position: absolute;
      bottom: 10px;
      left: 130px;
    }
  }

  .location {
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 50%;
    left: 170px;
    margin-top: -10px;
    margin-left: -10px;
    z-index: 1000;
  }

  .labelMargin{
    margin-bottom: 3px;
  }
  .map-btn{
    padding: 3px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 5px;
    background-color: #18cc3b;
    color: white;
    font-size: 16px;
    cursor: pointer;
  }
</style>
